<template>
    <div>
        <span>获取验证码({{ time }}s)</span>
    </div>
</template>

<script setup lang='ts' name="CountDown">
import { ref, watch } from 'vue';
//倒计时事件
let time = ref<number>(5)
//接收父组件传递过来的props-》flag
let props = defineProps(['flag'])
let $emit=defineEmits(['getFlag'])
//监听父组件传递过来的数据变化
watch(() => props.flag.value, () => {
    //开启定时
    let timer = setInterval(() => {
        time.value--
        if (time.value == 0) {
            //通知父组件 倒计时模式结束
            $emit('getFlag',false)
            //清除定时器
            clearInterval(timer)
        }
    }, 1000)
}, {
    immediate: true
})
</script>

<style></style>